<template>
  <el-container>
    <el-header class="header flex_cc">
      <div class="headerBox flex_b">
        <img src="/static/images/logo.png" alt="">
        <div style="position:absolute;left:170px;margin-left: 2vw;
    padding-left: 2vw;
    color: #fff;
    font-size: 1.6vw;
    font-weight: 500;
    border-left: 2px solid #284c62;">{{fName}}</div>
      </div>
    </el-header>
    <el-main>
      <div class="boardGroup mainBody flex">
        <div class="boardBox" style="width:100%;">
          <v-price v-if="boardIndex == '1'"></v-price>
          <v-material v-else-if="boardIndex == '2'"></v-material>
          <v-orderSchedule v-else-if="boardIndex == '3'"></v-orderSchedule>
          <v-taskSchedule v-else-if="boardIndex == '4'"></v-taskSchedule>
          <v-facility v-else-if="boardIndex == '5'"></v-facility>
          <v-facilityAll v-else-if="boardIndex == '6'"></v-facilityAll>
          <v-schedule v-else-if="boardIndex == '7'"></v-schedule>
          <v-report v-else-if="boardIndex == '8'"></v-report>
          <v-createBoard v-else :boardIndex="boardIndex"></v-createBoard>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import { getCookie, delCookie } from '../cookieUtil/cookieUtil';

  import Price from './board/Price.vue'                   //牌价看板
  import Material from './board/Material.vue'             //订单投领料
  import OrderSchedule from './board/OrderSchedule.vue'   //订单进度
  import TaskSchedule from './board/TaskSchedule.vue'     //任务单进度
  import Facility from './board/Facility.vue'             //设备运行情况
  import FacilityAll from './board/FacilityAll.vue'       //设备总运行情况
  import Schedule from './board/Schedule.vue'             //排班
  import Report from './board/Report.vue'                 //完成汇报
  import CreateBoard from './board/CreateBoard.vue'       //生成看板

  export default {
    name: 'Board',
    components: {
      'v-price': Price,
      'v-material': Material,
      'v-orderSchedule': OrderSchedule,
      'v-taskSchedule': TaskSchedule,
      'v-facility': Facility,
      'v-facilityAll': FacilityAll,
      'v-schedule': Schedule,
      'v-report': Report,
      'v-createBoard': CreateBoard,
    },

    props: {
      // tagIndex: {
      //   type: String,
      //   required: true
      // }
    },

    data () {
      return {
        boardIndex: this.$route.query.boardIndex,
        showCreateBoard: false,
        boardList: [],
        fName:""
      }
    },

    created(){
      //this.getBoard();
       let that = this;
      let data = { id: this.boardIndex };
       axios
        .post(
          this.host + "/WebApi/ConfigureBbRpt",
          qs.stringify({
            ...data
          })
        )
        .then(function(response) {
          console.log(response)
that.fName=response.data.fName
        });
    },

    watch: {
      //tagIndex() {
        //this.getBoard()
      //}
    },

    methods: {
      //获取模块下看板信息
      getBoard () {
        let that = this;
        let data = {
              id: getCookie('userId'),
              module: parseInt(that.tagIndex),
              search: '',
            };
        axios.post(this.host+'/WebApi/SelectBbRpt',
          qs.stringify({
            ...data,
          }))
        .then(res=>{
          console.log("res.data",res.data.fName);
          res.data.map(item => {
            // console.log(item.id)
            that.fName=item.fName
            item.id = String(item.id);
            console.log(item.id)
          });
          
          that.boardList = res.data;
          console.log(that.boardList[0].id)
          if(that.boardList.length != 0) {
            that.boardIndex = that.boardList[0].id;
          }else{
            that.boardIndex = ''
          }
          console.log(that.boardList)
        })
        .catch(error=>{
          console.log(error);
        });
      },

      //切换看板
      changeBoard (key) {
        console.log('changeBoard-key',key);
        this.boardIndex = key
        if (key == '001' || key == '002' || key == '003' || key == '004' || key == '005' || key == '006' || key == '007' || key == '008') {
          this.showCreateBoard = false;
        }else{
          this.showCreateBoard = false;
          let that = this;
          this.$nextTick(() => {
            that.showCreateBoard = true;
          })
        }
      }
    }
  }
</script>

<style scoped>
  .mainBody{
    overflow: hidden;
    border-radius: 10px;
    background: #232d45;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #1f394c 0%, #2d3654 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1f394c), color-stop(100%, #2d3654));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #1f394c 0%, #2d3654 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #1f394c 0%, #2d3654 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #1f394c 0%, #2d3654 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #1f394c 0%, #2d3654 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1f394c, endColorstr=#2d3654, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */  
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
    height: 100%;
    overflow-y: auto; 
  }
  .el-menu{
    padding: 20px 0 0;
    box-sizing: border-box;
    border-right: 2px solid #374757;
  }
  .boardBox{
    width: calc( 100% - 150px);
    padding: 15px 15px 0 15px;
    box-sizing: border-box;
    background-color: rgba(red, green, blue, 0);
  }
  .el-menu-item, .el-submenu__title{
    height: 45px;
    line-height: 45px;
  }
  .el-menu-item{
    font-size: 15px;
    color: #959595;
    border-top: 1px solid #31546c;
    background-color: rgba(0,0,0,0) !important;
  }
  .el-menu-item:last-child{
    border-bottom: 1px solid #31546c;
  }
  .el-menu-item:hover{
    background: rgba(0,0,0,0) !important;
  }
  .el-menu-item.is-active{
    color: #7ecef4;
    background-color: #192d3d !important;
  }
  .el-menu-item.is-active::before{
    content: '';
    width: 3px;
    height: 100%;
    background-color: #77c3e7;
    position: absolute;
    left: 0;
    top: 0
  }
</style>


